const bannerEle = document.querySelector('.swiper>.swiper-wrapper');
const productEle = document.querySelector('#product>.productList');
// const singleProductEle = document.querySelector('#product>.productList');
const btnEle = document.querySelector('.getMore');
const topEle = document.querySelector('#toTop');
const userEle = document.querySelector('#header .user span');
let totalNo = 1 //总页数，等于1
let str = '' //定义成全局的，才能把不同页数的拼接起来
// 用户信息管理
function onUser() {
    let user = localStorage.getItem('USER')
    user = JSON.parse(user)
    if (user == null) {
        alert('请登录')
        location.href = 'login.html'
    } else {
        userEle.innerHTML = user[0].name
        $('section p').on('click', function () {
            location.href = 'login.html'
            window.localStorage.removeItem('USER')
            logOut()
        })
    }
}
onUser()
// 告诉后端退出
function logOut() {
    $.ajax({
        type: 'get',
        url: 'http://api.yuguoxy.com/api/logout',
        success: function (result) {

        }
    })
}
/**
 * 动态渲染轮播图片
 */
function loadBanner(list) {
    let str = '';
    list.forEach(item => {
        let imgStr = `<div class="swiper-slide"><img src="${item.url}" alt=""></div>`
        str += imgStr
    });
    bannerEle.innerHTML = str
    // swiper初始化的代码要写在这里才可以使用,写在外面没办法加载
    var mySwiper = new Swiper('.swiper', {
        loop: true, // 循环模式选项
        autoplay: true, //自动播放

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

        // 如果需要滚动条
        scrollbar: {
            el: '.swiper-scrollbar',
        },
    })
}
// 获取后台轮播图片数据
function getBanner() {
    $.ajax({
        type: 'get',
        url: 'http://api.yuguoxy.com/api/shop/banner',
        success: function (result) {
            if (result.resultCode == 1) {
                let bannerList = result.resultInfo.list
                loadBanner(bannerList)
            }
        }
    })
}
getBanner()
// 动态渲染商品数据
function loadProdcut(list) {
    list.forEach(item => {
        let newStr = `<div class="singleProduct"  data-id="${item.id}">
                        <img src="${item.picture}" alt="">
                        <h2>${item.product}</h2>
                        <p>￥<span>${item.price}</span></p>
                    </div>`
        str += newStr
    })
    productEle.innerHTML = str
    goTODetail()
}
// 得到后台首页的商品列表数据
function getProductList(No) {
    // 获取XMLHttpRequest
    const xhr = new window.XMLHttpRequest()
    // 建立连接
    xhr.open('get', `http://api.yuguoxy.com/api/shop/list?pageSize=8&pageNo=${No}`)
    // 发送请求
    xhr.send()
    // 处理响应
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                let result = xhr.responseText
                // 得到的是字符串，不要忘记字符串转对象
                result = JSON.parse(result)
                if (result.resultCode == 1) {
                    let data = result.resultInfo.list
                    totalNo = result.resultInfo.totalNum
                    // console.log(totalNo);
                    loadProdcut(data)
                }
            }
        }
    }
}
// 点击查看更多，加载四个商品数据
function onClick() {
    let pageNo = 0 //等于0
    btnEle.onclick = function () {
        // 判断边界，大于总页数就跳转数据
        if (++pageNo > totalNo) { //++i等价于i=i+1，相当于给i赋值了
            pageNo = totalNo
            alert('没有数据,已经到底部')
            return //执行完就不再执行
        }
        getProductList(pageNo)
    }
}
onClick()
// 回到顶部
function toTop() {
    topEle.onclick = function () {
        document.documentElement.scrollTop = 0
    }
}
toTop()
// 点击商品，跳转到商品详情
function goTODetail() {
    $(productEle).on('click', '.singleProduct', function () {
        let id = this.getAttribute('data-id')
        location.href = `productDetail.html?id=${id}` //拼出来的id方便下一个页面找
    })
}